<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- 如果我们要把data这两个值一起显示的时候，我之前的写法就是这个直接使用两个插值文本或者是表达示来实现 -->
    <h1>{{name1}} {{name2}}</h1>
    <h1>{{name1 + ' ' + name2}}</h1>
    <!--
    其实Vue的设计初衷就是为了把界面的逻辑最简单化，太多的逻辑放在界面上，后续如果修改起来会难以维护，这时候Vue给了我们更好的一个功能可以显示这个问题就是计算属性computed
    计算属性跟他自己处理的data值是绑定，就是说你在计算属性用了那个data的值计算，如果data的值改变了，计算属性的计算值也会跟着改变，不需要做其他操作
     -->
    <h1>{{name3}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3 : function () {
                return this.name1 + ' ' + this.name2;
            }
        }
    });
</script>
</html>
